<template>
  <div class='com-unit' @click="gotoDetail">
    <img :src="formaltInfo.mainImage||productImg" alt="">
    <div class="intro">
      <p class="mb15">
        <span>{{formaltInfo.name||"暂无名称"}}</span>
        <span class="fr">{{formaltInfo.model||"暂无类型"}}</span>
      </p>
      <p class="color-666">
        <span class="color-red">{{formaltInfo.price||"暂无售价"}}</span>
        <span class="fr ft14">{{formaltInfo.salesCount||"暂无销量"}}</span>
      </p>
    </div>
  </div>
</template>
<script>
export default {
  props:['info'],
  components: {},
  name: "",
  data() {
    return {
      productImg:require('@/assets/imgs/homepage/hotsale/product.jpg'),
    };
  },
  computed:{
    formaltInfo(){
      return this.info
    }
  },
  methods: {
    gotoDetail(){
      this.$router.push({
        path:"/productDetails",
        query:{id:this.info.id,shopId:this.formaltInfo.storeId}
      })
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.com-unit {
  cursor: pointer;
  height: 100%;
  border: 1px solid #efefef;
  box-sizing: border-box;
  padding:15px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  img{
   /*width: 90%;*/
    width: 202px;
    height:202px;
    margin: 0 auto
  }
  .intro{
    box-sizing: border-box;
    color: #666;
    font-size: 16px;
  }
}
</style>